<template>
  <div class="  " curpagename="s7657868752">
    <el-dialog
      v-model="progressDialogVisible"
      :title="batchMsg.batchDialogTitle"
      width="500"
      :show-close="batchResultVisible"
      :close-on-press-escape="false"
      :close-on-click-modal="false"
      :before-close="batchHandleClose"
      :class="{ clear_title: batchErrorList.length == 0 && batchResultVisible }"
    >
      <el-progress
        v-show="!batchResultVisible"
        :percentage="batchPercentage"
        :stroke-width="15"
        status="success"
        striped
        striped-flow
        :duration="10"
        :text-inside="true"
      />
  
      <div class="result_list" v-show="batchResultVisible">
        <template v-if="batchErrorList.length != 0">
          <el-scrollbar height="300px"> 
            <div v-for="item in batchErrorList" :key="item">
              <div>{{ item.key }} - {{ item.message }}</div> 
              
              </div>
          </el-scrollbar>
        </template>
        <div v-if="batchErrorList.length == 0">
          <el-result icon="success" :title="batchMsg.success" :sub-title="batchMsg.successTipsSub"> </el-result>
        </div>
        <div class="auto_close" v-if="batchDurationTime!=0">{{ batchDurationTime }}s</div>
      </div>
      <template #footer v-if="!(batchResultVisible && batchErrorList.length == 0)">
        <div class="dialog-footer">
          <el-button v-show="!batchResultVisible" type="danger" @click="batchStop">{{ batchMsg.batchStop }}</el-button>
          <el-button v-show="batchResultVisible" @click="batchHandleClose">{{ batchMsg.batchCancel }}</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>
<script setup lang='ts'   >
import { ref, reactive, getCurrentInstance, inject } from "vue";

const progressDialogVisible = inject("progressDialogVisible");
const batchPercentage = inject("batchPercentage");
const batchResultVisible = inject("batchResultVisible");
const batchErrorList = inject("batchErrorList");
const batchDurationTime = inject("batchDurationTime");
const batchHandleClose = inject("batchHandleClose");
const batchStop = inject("batchStop");
const batchMsg = inject("batchMsg");
</script>
<style lang='scss' scoped>
:deep(.clear_title) {
  .el-dialog__header {
    border-bottom: none;
  }
  .el-dialog__title {
    opacity: 0;
  }
  .result_list {
    margin-top: -40px;
  }
}
.auto_close {
  text-align: right;
  color: #747272;
}
</style>

<style lang="scss">
.batch_error_list{
 width: 500px!important;
}
</style>


